<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>标签管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/test/index/css/font.css">
    <link rel="stylesheet" href="/test/index/css/xadmin.css">
<!--    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="/test/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/test/index/js/xadmin.js"></script>
</head>

<body>
<div class="" style="margin-top: 1.5%">
    <div class="layui-row demoTable">
        <form class="layui-form layui-col-md12 x-so">
            <label class="layui-form-label" style="width: 60px;float: none;">日期:</label>
            <div class="layui-inline" id="test6">
                <div class="layui-input-inline" style="float: left;">
                    <input type="text" name="start" autocomplete="off" id="start" class="layui-input"
                           placeholder="开始日期">
                </div>
                <div class="layui-form-mid" style="margin: 0 10px;">-</div>
                <div class="layui-input-inline" style="float: left;">
                    <input type="text" name="end" autocomplete="off" id="end" class="layui-input"
                           placeholder="结束日期">
                </div>
            </div>
            <label class="layui-form-label" style="width: 60px;float: none;">标签名称:</label>
            <input type="text" name="projectName" placeholder="请输入标签名称" id="labelName" autocomplete="off"
                   class="layui-input">
            <button class="layui-btn" type="button" data-type="reload"><i class="layui-icon">&#xe615;</i>搜 索</button>
            <button class="layui-btn layui-btn-primary" type="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                重 置</button>
        </form>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="projectBatchDel"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" lay-event="projectAddData"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    // 返回顶部
    layui.use(['form', "table", 'layer', 'util', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            util = layui.util,
            laydate = layui.laydate;
        //固定块
        util.fixbar({
            css: {right: 50, bottom: 100}
            , bgcolor: '#393D49'
            , click: function (type) {
                console.log(type);
                if (type === 'top') {
                    layer.msg('返回顶部')
                }
            }
        });
        //日期范围
        laydate.render({
            elem: '#test6',
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            range: ['#start', '#end'],
            max: maxDate(),
            theme: '#009688'
        });
    });

    // 设置最大可选的日期
    function maxDate() {
        var now = new Date();
        return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
    }

    // //执行一个laydate实例
    // laydate.render({
    //     elem: '#end', //指定元素
    //     max: maxDate(),
    //     theme: "#009688",
    // });

    layui.use('table', function () {
        var table = layui.table;
        tableIns = table.render({
            elem: '#test'
            , url: 'getListData'
            , method: 'GET'
            , title: '标签管理表'
            , toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            // , limit: 15
            // , limits: [15, 30, 45, 60, 75, 90]
            , loading: true //是否开始加载条
            , even: true //开启隔行背景#
            , id: 'testReload'
            , cols:
                [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        // , {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}
                        , {field: 'labelName', title: '标签名', sort: true}
                        , {
                        field: 'labelInfo', title: '标签概述',
                        templet: function (res) {
                            return '<em>' + res.labelInfo + '</em>'
                        }
                    }
                        , {field: 'createTime', title: '创建时间', sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            , page: true,
            //解决页码的问题
            done: function (res) {
                // 获得当前页码
                var brforeCurr = tableIns.config.page.curr;
                // 获得当前页的记录数
                var dataLength = table.cache['testReload'].length;
                var count = res.count; // 获得总记录数
                //如果当前页的记录数为0并且总记录数不为0
                if (dataLength == 0 && count != 0) {
                    // 刷新表格到上一页
                    table.reload("testReload", {
                        page: {
                            curr: brforeCurr - 1
                        }
                    });
                }
            }
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //这里面有当前行数据
            switch (obj.event) {
                case 'projectAddData':
                    x_admin_show('添加', '/label/addView', 600, 400, null)
                    break;
                case "projectBatchDel":
                    // var idList = []
                    var data = checkStatus.data;
                    // for (index in data) {
                    //     idList.push(data[Number(index)].id)
                    // }
                    if (data.length < 1) {
                        layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                    } else {
                        let loading = layer.load();
                        //发异步
                        $.ajax({
                            type: "POST",
                            url: "/label/batch/delete",
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(data),//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                            success: function (data) {
                                layer.close(loading);
                                if (data.code == 200) {
                                    layer.msg(data.message, {
                                        icon: 1,
                                        time: 2000
                                    }, function () {
                                        table.reload("testReload");
                                    });
                                } else {
                                    layer.msg(data.message, {
                                        icon: 2,
                                        time: 2000
                                    });
                                }
                            },
                            error: function (data) {
                            }
                        });
                        break;
                    }
                case  "refresh":
                    table.reload('testReload');
                    break;
            }

        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除此标签嘛?', function (index) {
                    let loading = layer.load();
                    //发异步
                    $.ajax({
                        type: "POST",
                        url: "/label/delete",
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(data),
                        dataType: "json",
                        success: function (data) {
                            layer.close(loading);
                            if (data.code == 200) {
                                layer.close(index);
                                layer.msg(data.message, {
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    obj.del();
                                    table.reload("testReload");
                                });
                            } else {
                                layer.msg(data.message, {
                                    icon: 2,
                                    time: 2000
                                });
                            }
                        },
                        error: function (data) {
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                x_admin_show('编辑', '/label/editView', 600, 400, obj.data.id)
                // layer.prompt({
                //     formType: 2
                //     , value: data.projectInfo
                // }, function (value, index) {
                //     obj.update({
                //         projectInfo: value
                //     });
                //     layer.close(index);
                // });
            }
        })
        // 数据搜索重新加载
        // 搜索
        var $ = layui.$, active = {
            reload: function () {
                let labelName = $('#labelName');
                let start = $('#start');
                let end = $('#end');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        labelName: labelName.val(),
                        start: start.val(),
                        end: end.val()
                    }
                }, 'data');


            }
        };
        //绑定搜索按钮
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    })
</script>
</body>

</html>